<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue3 基础示例</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    body {
      font-family: 'Microsoft YaHei', sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      line-height: 1.6;
    }
    .demo-section {
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 20px;
      margin-bottom: 20px;
    }
    h2 {
      color: #42b983;
      border-bottom: 2px solid #42b983;
      padding-bottom: 8px;
    }
    button {
      background-color: #42b983;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;
      margin-right: 8px;
      margin-top: 8px;
    }
    button:hover {
      background-color: #33a06f;
    }
    input {
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      margin-top: 8px;
      width: 100%;
      max-width: 300px;
    }
    .todo-item {
      display: flex;
      align-items: center;
      padding: 8px 0;
      border-bottom: 1px solid #eee;
    }
    .todo-item input[type="checkbox"] {
      margin-right: 10px;
      width: auto;
    }
    .completed {
      text-decoration: line-through;
      color: #999;
    }
  </style>
</head>
<body>
  <h1>Vue3 基础示例</h1>
  
  <!-- 文本插值示例 -->
  <div id="text-interpolation" class="demo-section">
    <h2>文本插值</h2>
    <div>{{ message }}</div>
    <button @click="reverseMessage">反转消息</button>
  </div>

  <!-- 属性绑定示例 -->
  <div id="attribute-binding" class="demo-section">
    <h2>属性绑定</h2>
    <div>
      <input type="text" v-model="inputValue" placeholder="输入链接文本">
      <p>
        <a :href="url" :title="inputValue">{{ inputValue || '点击访问链接' }}</a>
      </p>
      <p>动态 class: <span :class="{ active: isActive }">这段文本的样式会根据状态变化</span></p>
      <button @click="toggleActive">切换状态</button>
    </div>
  </div>

  <!-- 条件渲染示例 -->
  <div id="conditional-rendering" class="demo-section">
    <h2>条件渲染</h2>
    <div>
      <button @click="toggleShow">切换显示</button>
      <p v-if="show">使用 v-if 显示的内容</p>
      <p v-else>使用 v-else 显示的内容</p>
      
      <h3>v-show 示例:</h3>
      <p v-show="show">使用 v-show 显示的内容 (只是切换 CSS display 属性)</p>
    </div>
  </div>

  <!-- 列表渲染示例 -->
  <div id="list-rendering" class="demo-section">
    <h2>列表渲染</h2>
    <div>
      <input v-model="newItem" @keyup.enter="addItem" placeholder="添加新项目，按回车确认">
      <button @click="addItem">添加</button>
      <ul>
        <li v-for="(item, index) in items" :key="index">
          {{ item }}
          <button @click="removeItem(index)">删除</button>
        </li>
      </ul>
    </div>
  </div>

  <!-- 事件处理示例 -->
  <div id="event-handling" class="demo-section">
    <h2>事件处理</h2>
    <div>
      <p>计数器: {{ counter }}</p>
      <button @click="increment">+1</button>
      <button @click="decrement">-1</button>
      <button @click="incrementBy(5)">+5</button>
    </div>
  </div>

  <!-- 表单绑定示例 -->
  <div id="form-binding" class="demo-section">
    <h2>表单绑定</h2>
    <div>
      <div>
        <label>文本输入:</label>
        <input v-model="formData.text" placeholder="输入文本">
        <p>输入的文本: {{ formData.text }}</p>
      </div>
      
      <div>
        <label>多选框:</label>
        <input type="checkbox" v-model="formData.checked"> 是否选中
        <p>选中状态: {{ formData.checked }}</p>
      </div>
      
      <div>
        <label>单选按钮:</label>
        <input type="radio" v-model="formData.radio" value="选项1"> 选项1
        <input type="radio" v-model="formData.radio" value="选项2"> 选项2
        <p>选择的选项: {{ formData.radio }}</p>
      </div>
      
      <div>
        <label>下拉选择:</label>
        <select v-model="formData.selected">
          <option disabled value="">请选择</option>
          <option>选项A</option>
          <option>选项B</option>
          <option>选项C</option>
        </select>
        <p>选择的值: {{ formData.selected }}</p>
      </div>
    </div>
  </div>

  <!-- 简单待办事项应用 -->
  <div id="todo-app" class="demo-section">
    <h2>待办事项应用</h2>
    <div>
      <input 
        v-model="newTodo" 
        @keyup.enter="addTodo" 
        placeholder="添加新待办事项，按回车确认">
      <button @click="addTodo">添加</button>
      
      <div v-if="todos.length > 0">
        <div class="todo-item" v-for="(todo, index) in todos" :key="index">
          <input type="checkbox" v-model="todo.completed">
          <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
          <button @click="removeTodo(index)">删除</button>
        </div>
        
        <p>{{ remainingTodos }} 项未完成</p>
        <button @click="clearCompleted">清除已完成</button>
      </div>
      <p v-else>没有待办事项</p>
    </div>
  </div>

  <script>
    // 文本插值示例
    const textInterpolation = Vue.createApp({
      data() {
        return {
          message: '你好，Vue3！'
        }
      },
      methods: {
        reverseMessage() {
          this.message = this.message.split('').reverse().join('')
        }
      }
    }).mount('#text-interpolation')

    // 属性绑定示例
    const attributeBinding = Vue.createApp({
      data() {
        return {
          inputValue: '',
          url: 'https://cn.vuejs.org',
          isActive: false
        }
      },
      methods: {
        toggleActive() {
          this.isActive = !this.isActive
        }
      }
    }).mount('#attribute-binding')

    // 条件渲染示例
    const conditionalRendering = Vue.createApp({
      data() {
        return {
          show: true
        }
      },
      methods: {
        toggleShow() {
          this.show = !this.show
        }
      }
    }).mount('#conditional-rendering')

    // 列表渲染示例
    const listRendering = Vue.createApp({
      data() {
        return {
          newItem: '',
          items: ['苹果', '香蕉', '橙子']
        }
      },
      methods: {
        addItem() {
          if (this.newItem.trim()) {
            this.items.push(this.newItem)
            this.newItem = ''
          }
        },
        removeItem(index) {
          this.items.splice(index, 1)
        }
      }
    }).mount('#list-rendering')

    // 事件处理示例
    const eventHandling = Vue.createApp({
      data() {
        return {
          counter: 0
        }
      },
      methods: {
        increment() {
          this.counter++
        },
        decrement() {
          this.counter--
        },
        incrementBy(amount) {
          this.counter += amount
        }
      }
    }).mount('#event-handling')

    // 表单绑定示例
    const formBinding = Vue.createApp({
      data() {
        return {
          formData: {
            text: '',
            checked: false,
            radio: '',
            selected: ''
          }
        }
      }
    }).mount('#form-binding')

    // 待办事项应用
    const todoApp = Vue.createApp({
      data() {
        return {
          newTodo: '',
          todos: [
            { text: '学习 Vue3 基础', completed: false },
            { text: '尝试组合式 API', completed: false },
            { text: '构建一个项目', completed: false }
          ]
        }
      },
      computed: {
        remainingTodos() {
          return this.todos.filter(todo => !todo.completed).length
        }
      },
      methods: {
        addTodo() {
          if (this.newTodo.trim()) {
            this.todos.push({ text: this.newTodo, completed: false })
            this.newTodo = ''
          }
        },
        removeTodo(index) {
          this.todos.splice(index, 1)
        },
        clearCompleted() {
          this.todos = this.todos.filter(todo => !todo.completed)
        }
      }
    }).mount('#todo-app')
  </script>
</body>
</html>